import { defineComponent, h } from "vue";
import {px_e_rem} from "@uit/common.js"

const Cell = defineComponent({
    props:{
        leftshow:{
            type:Boolean,
            required:false            
        },  
        leftIcon:{
            type:String,
            required:false
        },
        leftText:{
            type:String,
            required:true
        },
        height:{
            type:String,
            required:false
        },
        rightIcon:{
            type:String,
            required:false
        },
        rightshow:{
            type:Boolean,
            required:false            
        }, 
        rightText:{
            type:String,
            required:false
        },
        onclick:{
            type:Function,
            required:false
        }
    },
    render(){

        const LeftIconS = () =>{
            return h(
                'img',
                {
                    style:{
                        width:px_e_rem('38'),
                        height:px_e_rem('38'),
                    },
                    src:this.leftIcon
                }
            )
        }

        const LeftTexts = () =>{
            return h(
                'div',
                {
                    style:{
                        color:'#333333',
                        fontSize:px_e_rem(28),         
                        marginLeft:px_e_rem(16),                        
                    }
                },
                this.leftText
            )
        }

        const RightIconS = () =>{
            const Icons = require("../../assets/imgs/my_left.png")
            return h(
                'img',
                {
                    style:{
                        width:px_e_rem(10),
                        height:px_e_rem(20)
                    },
                    src:this.rightIcon?this.rightIcon:Icons
                }
            )
        }

        const RightTexts = () =>{
            return h(
                'div',
                {
                    style:{
                        color:'#999999',
                        fontSize:px_e_rem(28),    
                        marginRight:px_e_rem(24)
                    }
                },
                this.rightText?this.rightText:null
            )
        }

        const createChildrens = () => {
            let leftChildren = []
            let RightChildren = []
            this.leftIcon && leftChildren.push(LeftIconS())
            this.leftText && leftChildren.push(LeftTexts())
            this.rightText && RightChildren.push(RightTexts())
            RightChildren.push(RightIconS())
            return [
                h(
                    'div',
                    {
                        style:{
                            display: 'flex',
                        }
                    },
                    leftChildren
                ),
                h(
                    'div',
                    {
                        style:{
                            display: 'flex',
                            alignItems: 'center',
                        }
                    },
                    RightChildren
                )
            ]
        }

        return h(
            'div',
            {
                style:{
                    width:'100vw',
                    height:px_e_rem(120),
                    background:'#ffffff',
                    display:'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between'
                },
                onclick:this.onclick
            },
            createChildrens()
        )
    }
})

export default Cell